<template>
  <div>
    <el-dialog
      custom-class="lineDialog"
      :visible.sync="dialogVisible"
      width="30%"
      :title="`${filterName(currStu)} 详情`"
    >
      <!-- <chartsLine
        :echartsName="'dialogLine-stuScore'"
        :taskCount="lineChartData.taskCount"
        :scoreCount="lineChartData.scoreCount"
        @handelFullScreen="handelFullScreen"
        :start="0"
        :end="40"
        :width="'797px'"
        :height="'400px'"
        :showName="true"
        v-if="dialogVisible"
      /> -->
      <carouselEchartsLine
        :echartsName="'dialogLine-stuScore'"
        :taskCount="lineChartData.taskCount"
        :finshCount="finshCount"
        :studyCount="studyCount"
        :scoreCount="lineChartData.scoreCount"
        :width="'797px'"
        :height="'400px'"
        v-if="dialogVisible"
      />
    </el-dialog>
  </div>
</template>

<script>
const carouselEchartsLine = () =>
  import("@/components/carouselEcharts/carouselEchartsLine");
// const chartsLine = () => import("@/components/echarts/echartsLine.vue");
export default {
  components: {
    // chartsLine,
    carouselEchartsLine,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  watch: {
    dialogVisible(n) {
      if (!n) {
        this.$emit("handleClose");
      }
    },
    show(n) {
      if (n) {
        this.dialogVisible = n;
      }
    },
  },
  props: {
    show: Boolean,
    lineChartData: Array,
    currStu: Object,
    finshCount: Object,
    studyCount: Object,
  },
  methods: {
    filterName(value) {
      return (
        value.realName ||
        value.nickName ||
        value.email ||
        value.regName ||
        value.stuNum
      );
    },
  },
};
</script>

<style lang="stylus">
.lineDialog {
  width: 824px !important;
  height: 571px !important;

  .el-dialog__header {
    padding: 0;
    text-align: center;
    padding-top: 20px;

    .el-dialog__close {
      font-size: 20px;
    }
  }

  .el-dialog__body {
    padding: 40px 0;

    > div {
      margin: 0 auto;
    }
  }
}
</style>